import React, { Component } from 'react';
import TheTable from "../../../components/TheTable";
import TheButton from "../../../components/TheButton";
import TheDialog from "../../../components/TheDialog";
import '../style/index.less'
import { apiGetShufflingPage, apiGetShufflingSort, apiGetShufflingAdd, apiGetShufflingEdit, apiGetShufflingDel } from '@/request/configuration'
import TheImage from "../../../components/TheImage";
import Editor from "../component/editor";

class Shuffling extends Component {
  state = {
    loading: true,
    dataSource: null,
    columns: [
      {
        title: "图片",
        dataIndex: "configCarouselFilez",
        key: "configCarouselFilez",
        render: (text, record) => {
          return <TheImage width={270} height={106} src={record.configCarouselFilez} />
        }
      },
      {
        title: "标题",
        dataIndex: "configCarouselTitle",
        key: "configCarouselTitle"
      },
      {
        title: "排序",
        dataIndex: "configCarouselSort",
        key: "configCarouselSort"
      },
      {
        title: "操作",
        render: (text, record) => {
          return <>
            <TheButton haspermi={['set:mall:edit']}  onClick={() => this.update(record)}>修改</TheButton>
            <TheButton haspermi={['set:mall:delete']} onClick={() => this.del(record)}>删除</TheButton>
          </>
        }
      },
    ],
    dialogStatus: false,
    title: '',
    radioValue: '',
    initialValues: null,
    btnLoading: false,
    edit: false,
    configCarouselSite:"3"
  }

  async componentDidMount() {
    await this.getData()
  }

  getData = async () => {
    const response = await apiGetShufflingPage({configCarouselSite:"3"})
    if (response.code === 0) {
      this.setState({
        dataSource: response.data,
        loading: false,
      })
    } else {
      this.setState({
        dataSource: null,
        loading: false
      })
    }
  }

  update = value => {
    this.setState({
      dialogStatus: true,
      title: '修改轮播图',
      initialValues: value,
      radioValue: value.configCarouselType,
      edit: true,
      type:'editor'
    })
  }

  del = record => {
    React.$confirm({
      title: "警告",
      content: `确定删除此信息吗？`,
      onOk: async () => {
        this.setState({
          loading: true
        })
        const data = await apiGetShufflingDel({ configCarouselId: record.configCarouselId })
        if (data.code === 0) {
          await this.getData()
          this.setState({
            loading: false
          })
        } else {
          this.setState({
            loading: false
          })
        }
      }
    });
  }
  openDialog = () => {
    
      this.setState({
        dialogStatus: true,
        title: '新增轮播图',
        type:"add"
      })
    
  }
  dialogCancel = () => {
    this.setState({
      dialogStatus: false,
      title: '',
      btnLoading: false,
      initialValues: null,
      edit: false
    })
  }
  onFinish = async values => {
    const { edit, initialValues } = this.state
    this.setState({
      btnLoading: true
    })
    let data = null
    if (edit) {
      data = await apiGetShufflingEdit({ ...values, configCarouselId: initialValues.configCarouselId })
    } else {
      data = await apiGetShufflingAdd({ ...values,configCarouselSite:"3"})
    }
    if (data.code === 0) {
      await this.dialogCancel()
      await this.getData()
      if (initialValues) {
        React.$message({
          type: 'info',
          content: '修改成功'
        })
      } else {
        React.$message({
          type: 'info',
          content: '新增成功'
        })
      }
    } else {
      this.setState({
        btnLoading: false
      })
    }
  }
  pageChange = (pageNo, pageSize) => {
    this.setState({
      pageParams: {
        pageNo,
        pageSize
      }
    })
  }

  render() {
    const { loading, dataSource, columns, dialogStatus, title, btnLoading, initialValues,type,configCarouselSite } = this.state
    return <div className={"p-layout-box configuration"}>
      <div className={"p-layout-header"}>
        <TheButton haspermi={['set:mall:add']} type={'default'} size={'middle'} 
          onClick={this.openDialog}>新增轮播图</TheButton>
      </div>
      <div className={"p-layout-content-pagination"}>
        <TheTable loading={loading} dataSource={dataSource} columns={columns} />
        {/* <ThePagination pageNumber={pageNumber} pageSize={pageSize} total={total} pageChange={this.pageChange} /> */}
      </div>
      <TheDialog
        visible={dialogStatus}
        title={title}
        width={800}
        handleCancel={this.dialogCancel}
        footer={null}
      >
        <Editor dialogCancel={this.dialogCancel} onFinish={this.onFinish} data={initialValues}
          btnLoading={btnLoading}
          type={type}
          configCarouselSite={configCarouselSite}
           />
      </TheDialog>
    </div>
  }
}

export default Shuffling